<template>
  <page-card :title="menuName">
    <a-form-model layout="horizontal"
                  :model="searchForm"
                  ref="searchForm"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-model-item label="操作模块"
                             prop="operationModule">
            <a-input v-model="searchForm.operationModule"
                     placeholder="请输入"
                     allowClear />
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="操作类型"
                             prop="operationType">
            <a-select v-model="searchForm.operationType"
                      placeholder="请选择"
                      allowClear>
              <a-select-option :value="item.value"
                               :key="item.value"
                               v-for="item in typeList">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="操作内容"
                             prop="operationContent">
            <a-input v-model="searchForm.operationContent"
                     placeholder="请输入"
                     allowClear />
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="操作人员"
                             prop="userName">
            <a-input v-model="searchForm.userName"
                     placeholder="请输入"
                     allowClear />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-model-item label="操作时间"
                             prop="dateRange">
            <a-range-picker v-model="searchForm.dateRange"
                            :show-time="{ format: 'HH:mm' }"
                            style="width: auto;"
                            format="YYYY-MM-DD HH:mm"
                            :placeholder="['开始时间', '结束时间']"
                            @change="onChangeDate" />
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="操作系统"
                             prop="operationSystem">
            <a-input v-model="searchForm.operationSystem"
                     placeholder="请输入"
                     allowClear />
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item>
            <a-button type="primary"
                      :loading="loading"
                      :disabled="loading"
                      @click="onSearch">
              查询
            </a-button>
            <a-button style="margin-left: 10px;"
                      @click="onReset('searchForm')">
              重置
            </a-button>
          </a-form-model-item></a-col>
      </a-row>
    </a-form-model>
    <div style="margin-bottom: 10px;">
      <a-button type="primary"
                :disabled="exportLoading || loading"
                :loading="exportLoading"
                @click="onExport">
        导出
      </a-button>
    </div>
    <div class="table-wrap">
      <a-table :columns="columns"
               :pagination="false"
               :data-source="tableData">
        <template slot="content"
                  slot-scope="text, record">
          <a-popover placement="bottomLeft"
                     trigger="click">
            <span class="content-intro-wrap">
              {{ text.replace(/<[^<>]+>/g, '') }}
            </span>
            <template slot="title">
              <div class="content-title-wrap">
                {{ `${record.unitName}-${record.userName}-${record.operationModule}-${record.operationTerminal}` }}
                <span style="margin-left: 15px;">{{ `${record.operationTime}` }}</span>
              </div>
            </template>
            <template slot="content">
              <div class="content-detail-wrap"
                   v-html="text"></div>
            </template>
          </a-popover>
        </template>
        <template slot="operationType"
                  slot-scope="text, record">
          <a-tag>
            {{ getTypeText(text) }}
          </a-tag>
        </template>
      </a-table>
      <div class="page-wrap">
        <a-pagination size="small"
                      v-model="pageInfo.current"
                      :show-total="total => `共 ${total} 条数据`"
                      :total="pageInfo.total"
                      :pageSize.sync="pageInfo.pageSize"
                      @change="onPage"
                      @showSizeChange="onPageSize"
                      show-size-changer
                      show-quick-jumper />
      </div>
    </div>
  </page-card>
</template>
<script>
import { columns } from './config'
import { fetchSyLogList, fetchOperateTypeList, fetchExportLog } from '../../api/operate-log'
export default {
  name: 'OperateLogList',
  data () {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      loading: false,
      exportLoading: false,
      tableData: [],
      columns: columns,
      pageInfo: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      typeList: [],
      searchForm: {
        operationModule: '',
        operationType: '',
        operationContent: '',
        userName: '',
        operationSystem: '',
        dateRange: [],
        startTime: '',
        endTime: ''
      }
    }
  },
  computed:{
    // 菜单名字
    menuName(){
      return this.$route.meta.title || this.$route.name
    }
  },
  created () {
    this.getSyLogList()
    this.getOperateTypeList()
  },
  methods: {
    // 获取操作日志列表
    async getSyLogList () {
      this.loading = true
      try {
        const params = {
          ...this.searchForm,
          currPage: this.pageInfo.current,
          pageSize: this.pageInfo.pageSize
        }
        const res = await fetchSyLogList(params)
        this.tableData = res.list || []
        this.pageInfo.total = res.totalCount
      } finally {
        this.loading = false
      }
    },
    // 获取操作类型下拉列表
    async getOperateTypeList () {
      const list = await fetchOperateTypeList()
      for (const item of list) {
        const key = Object.keys(item)[0]
        this.typeList.push({
          label: item[key],
          value: Number(key)
        })
      }
    },
    // 导出日志
    async onExport () {
      this.exportLoading = true
      try {
        const params = {
          ...this.searchForm
        }
        const res = await fetchExportLog(params)
        const url = window.URL.createObjectURL(new Blob([res.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', `操作日志.xls`)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      } finally {
        this.exportLoading = false
      }
    },
    getTypeText (value) {
      const typeObj = this.typeList.find((item) => {
        return item.value === Number(value)
      })
      return typeObj ? typeObj.label : ''
    },
    onPage (page) {
      this.pageInfo.current = page
      this.getSyLogList()
    },
    onPageSize (current, pageSize) {
      this.pageInfo.pageSize = pageSize
      this.onSearch()
    },
    onSearch () {
      this.pageInfo.current = 1
      this.getSyLogList()
    },
    onReset (formName) {
      this.$refs[formName].resetFields()
      this.searchForm.startTime = ''
      this.searchForm.endTime = ''
      this.onSearch()
    },
    onChangeDate (date, dateString) {
      if (Array.isArray(dateString) && dateString.length === 2) {
        this.searchForm.startTime = dateString[0]
        this.searchForm.endTime = dateString[1]
      } else {
        this.searchForm.startTime = ''
        this.searchForm.endTime = ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
.page-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.content-intro-wrap {
  text-decoration: underline;
  color: #409eff;
  cursor: pointer;
}
.content-title-wrap,
.content-detail-wrap {
  width: 500px;
}
.content-detail-wrap {
  max-height: 300px;
  overflow: auto;
  ::v-deep img {
    width: 100% !important;
  }
}
</style>